<template>
    <div>
      <!-- <div v-ellipses>白日依山尽，黄河入海流，欲穷千里目,更上一层楼</div>
      <div v-ellipses="{width:'150px'}">白日依山尽，黄河入海流，欲穷千里目,更上一层楼</div>
      <div v-ellipses="{width:'200px'}">白日依山尽，黄河入海流，欲穷千里目,更上一层楼</div> -->
      <!-- <h2 v-mycolor="color" @click="color='#0000ff'">Hello Giles</h2> -->
      <!-- <h1 v-mycolor="color='#ff0000'">Hello Giles</h1>
      <h1 v-mycolor="color='#00ff00'">Hello Giles</h1> -->
      <!-- <hr> -->
      <!-- <div class="box" v-waterMarker="{content:'蜗牛学院',color:'#cccccc'}"></div> -->

      <div class="box" v-draw="{width:'500',height:'200'}"></div>

      <div class="box" v-draw="{width:'500',height:'200'}"></div>
    </div>
</template>

<script>
export default {
  data(){
    return{
      color:'orange'
    }
  },
  directives:{
    mycolor:{
      /*
        当我们将指令绑定到标签的时候会调用一次，在此方法中完成初始化功能
        el:所绑定指令(自定义指令)所在的DOM元素
        bindings:自定义指令的配置对象
          modifiers:指令的修饰符
          name:指令的名称(不含v-和修饰符的)
          rawName:指令的全名(v-的前缀和修饰符)
          value:指定的所传递的值
        vNode:更新之后的虚拟DOM节点对象
        oldVnode:更新之前的虚拟DOM节点
      */
      bind(el,bindings,vNode,oldVnode){
        console.log('bindings',bindings.value);
        el.style.color=bindings.value
      },
      componentUpdated(el,bindings,vNode,oldVnode){
        console.log('vNode',vNode);
        console.log('oldVnode',oldVnode);
        el.style.color=bindings.value
        el.innerHTML="Hello Woniuxy"
      }
    }
  }
}
</script>

<style>
  .box{
    width: 500px;
    height: 200px;
    border:1px solid #000
  }
</style>